<template>
  <div class="mcontaner">
  <el-row :gutter="20">
    <navUp :groups="groups"></navUp>
  </el-row>
    <el-row :gutter="20">
  <el-col :span="4">
  <navMenu :groups="groups"></navMenu>
  </el-col>
  <el-col :span="16">
  <el-button plain @click="open2">公告</el-button>
  <Header></Header>
    <search class="search"  :dd=dd @changeval='handleval' :blogsHotWrods="blogs"></search>
    <div class="block">
      <el-timeline>

        <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs">
          <el-card>
            <h4>
              <router-link :to="{name: 'BlogDetail', params: {blogId: blog.id}}">
                {{blog.title}}
              </router-link>
            </h4>
            <p class="ddd">板块：{{blog.groups}}</p>
            <p class="ddd">博主：{{blog.userId}}</p>
            <el-link class="del"  v-if="ownBlog"> 
            <button @click="del(blog.id,blog.userId)">删除</button>
            </el-link>
          </el-card>
          
        </el-timeline-item>

      </el-timeline>

      <el-pagination class="mpage"
                     background
                     layout="prev, pager, next"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :total="total"
                     @current-change=page>
      </el-pagination>

    </div>
    </el-col>
  <el-col :span="4">
  
  <calendar></calendar>
    
  </el-col>
</el-row>


  </div>
</template>

<script>
import {
        mapState,
        mapMutations
    } from 'vuex'
    import Header from "../components/Header";
    import search from "./search/search";
    import calendar from "./calendar";
    import navMenu from "./nav";
    import navUp from "./navUp";

    export default {
        name: "Blogs.vue",
        components: {
            Header,
            search,
            calendar,
            navMenu,
            navUp
            },
        data() {
            return {
                blogs: [],
                currentPage: 1,
                total: 0,
                pageSize: 5,
                input: '',
                isRouterAlive:true,
                dd:'',
                aaa: "",
                ownBlog: 0,
                groups:{},
                value: new Date()
            }
        },
        computed: {
            ...mapState(['city'])
        },
        methods: {
            ...mapMutations(['changeCity']),       //Mutate
            handleChangeCity(city) {
                this.changeCity(city)
                },
                open2() {
        this.$notify({
          title: '公告',
          message: '暂无公告',
          duration: 0
        });
      },
            page(currentPage) {
                const _this = this
              this.$notify({
                title: '公告',
                message: '暂无公告',
                duration: 0
              })
                this.handleShow()
                this.$axios.get("/blog/groups").then(res => {
                  _this.groups =res.data.data

                 })
                this.$axios.get("/blogs?currentPage=" + currentPage).then(res => {
                    // console.log(res)
                    _this.blogs = res.data.data.records
                    _this.currentPage = res.data.data.current
                    _this.total = res.data.data.total
                    _this.pageSize = res.data.data.size
                })
                this.$axios.get("/myblogs?currentPage=" + currentPage).then(res => {
                    // console.log(res)
                    _this.myblogs = res.data.data.records
                    _this.mycurrentPage = res.data.data.current
                    _this.mytotal = res.data.data.total
                    _this.mypageSize = res.data.data.size
                })
            },
            del (e,d) {
              const _this = this
              console.log("blog.id e:",e)
              console.log("blog.userId d:",d)
              console.log("当前账号为:",_this.$store.getters.getUser.username)

              if(d === _this.$store.getters.getUser.username||_this.$store.getters.getUser.username=="admin")
              {
              console.log("当前账号为")
              console.log(_this.$store.getters.getUser.id)
                
              this.$axios.get('/blog/delete/' +e).then(res => {
              // _this.reload()            //必须用push 不然不会刷新页面 不能用routerlink
                  alert("主人，删除成功")
                  window.location.reload()          //会卡一下
                  })
                  // _this.$router.reaplace("/blogs")   
                }else {
                  alert("您不是本人 勿删除")
                }
               }
            
            ,
         
            handleval(e) {
                this.aaa = e
                console.log("marke")
                console.log(this.aaa)
                const _this = this
                this.$axios.get("/blog/search/wd=" + e).then(res => {
                    _this.blogs = {} //清空才能刷新         
                    _this.blogs[0] = res.data.data
                    _this.$router.push("/blogs").catch(err => err)
                })
            },
            handleShow() {
              this.ownBlog = this.$store.getters.getUser.id
            }
        },
        created() {
            this.page(1)
            
  }
}
</script>

<style scoped>
  .ddd {
    padding: 10px 0px 10px;
  }
  >>>.el-button{
    border: solid 1px #ccc;
  }
    >>>.el-card__body {
      position: relative;

    }
    >>>.del {
      margin-top: 20px;
    }
    .el-timeline-item {
      height:150px;
    }  
    >>>.el-card__body .el-link
    {
      position: absolute;
      top: 15px;
      right: 5px;
      float: right;
      background-color:#fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      font-size: 12px Extra Small;
      font-family: "PingFang SC";
      padding:4px 8px;
      margin: 4px 4px ;
    }
    >>>.el-card__body {
      height: 75px;
    }
    a {
      display: inline-block;
      padding: 0;
      padding-bottom: 10px;
      margin: 0;
    }
    p  {
      padding: 0;
      margin: 0;
    }
    .mpage {
        margin: 0 auto;
        text-align: center;
    }
    
    .btn {
        width: 50px;
        height: 20px;
    }
    >>>.el-link button{
      background-color: #fff;
    }
    .calendar {
        height: 20px;
    }
</style>